<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 侯瑜
 * @LastEditTime: 2022-01-10 19:48:32
-->
<template>
  <!--1. 容器 -->
  <div ref="left2_container" style="height: 95%"></div>
</template>

<script>

import { Column } from '@antv/g2plot';
export default{
  data(){
    return{
      dataArr:[
                { type: '苹果',sales:125,},
                { type: '华为',sales:81,},
                { type: '三星',sales:43,},
                { type: '小米',sales:76,},
                { type: 'OPPO',sales:34,},
               ]
    }
  },
  created(){

  },
  mounted(){
    this.initChart()
  },
  methods:{
    initChart(){

      const columnPlot = new Column(this.$refs.left2_container, {
            data:this.dataArr,
            xField: 'type',
            yField: 'sales',
  label: {
    position: 'middle', 
    
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '人数',
    },
  },
});

columnPlot.render();
    }
  }

}
</script>
<style scoped>

</style>